<template>
  <!-- 提现管理 -->
  <view class="content">
    <view class="btns flex flex-x-between" v-if="!state.loading">
      <button class="btn flex1 main-bgColor fff bdr10 t-c">
        <view class="fz30">{{ $filter.formatYuan(state.account.withdrawnAmount) }}</view>
        <view class="fz34">已提现（元）</view>
      </button>
      <button class="btn flex1 btn-green fff bdr10 t-c">
        <view class="fz30">{{ $filter.formatYuan(state.account.undrawnAmount) }}</view>
        <view class="fz34">账户余额（元）</view>
      </button>
    </view>

    <view class="list">
      <view class="item bg-white" v-for="item in state.dataSource" :key="item.id" @click="item.status !== '0' ? $jump.navigateTo(`/pages/withdraw/details?id=${item.id}`) : ''">
        <view class="flex flex-y-center fz26 gray6">
          <view class="flex1">提现申请金额：￥{{ $filter.formatYuan(item.withdrawalAmount) }}</view>
          <view class="ml10 main-theme-color">{{ $filter.filterDictText(state.withdrawStatusOptions, item.status) }}</view>
        </view>
        <view class="flex flex-y-center fz26 gray6">
          <view class="flex1">提现方式：{{ $filter.filterDictText(state.withdrawTypeOptions, item.withdrawnType) }}</view>
          <view>{{ item.createTime }}</view>
        </view>
      </view>
    </view>

    <uni-load-more :status="mix.loading"></uni-load-more>

    <!-- 操作按钮 -->
    <view class="fixed-btn-box">
      <view class="btn-box flex flex-x-between bg-white"><button class="btn flex1 main-bgColor fff" @click="onWithDraw">提现申请</button></view>
    </view>

    <!-- 提现弹窗 -->
    <uni-popup ref="popupRef" type="center">
      <view class="popup popup-withdraw bg-white">
        <view class="tit fz36 t-c">提现申请金额</view>
        <view class="ct">
          <view class="fz24 gray9 t-c">提示：最多可提现金额：￥{{ (state.account.undrawnAmount / 100).toFixed(2) }}</view>
          <view class="flex flex-y-center mt30">
            <view class="flex1">提现申请金额：</view>
            <view class="flex1"><input v-model="state.num" @input="onInput" type="digit" class="input bg-gray fz30" placeholder="请输入金额(元)" /></view>
          </view>
        </view>
        <view class="btn-box mt50 flex t-c fz34">
          <view class="flex1" @click="popopClose">取消</view>
          <view class="flex1 main-bgColor fff" @click="onSure">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import minix from '@/common/js/mixin.js';
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { getWithdrawalList, initDictOptions, accountInfo, withdrawalAdd } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();
const { mix } = minix();
const state = reactive({
  isSend: false,
  loading: true,
  dataSource: [],
  account: [],
  withdrawTypeOptions: [],
  withdrawStatusOptions: [],
  num: null
});

const popupRef = ref(null);

// 初始化数据字典
const initDictConfig = () => {
  //初始化字典 - 提现方式
  initDictOptions('withdrawType', {}, { showLoad: false }).then(res => {
    if (res.success) {
      state.withdrawTypeOptions = res.result;
    }
  });

  //初始化字典 - 状态
  initDictOptions('withdrawStatus', {}, { showLoad: false }).then(res => {
    if (res.success) {
      state.withdrawStatusOptions = res.result;
    }
  });
};

// 获取数据
const loadData = page => {
  if (mix.isSend) {
    return;
  }
  mix.isSend = true;
  mix.loading = 'loading';
  if (page >= 0) {
    mix.query.pageNo = page;
  }
  if (page === 1) {
    state.dataSource = [];
  }
  const data = { ...mix.query, ...state.param };
  getWithdrawalList(data)
    .then(res => {
      state.dataSource = state.dataSource.concat(res.result.records);
      mix.query.pageNo++;
      if (!res.result.records || res.result.records.length < mix.query.pageSize) {
        mix.loading = 'noMore';
      } else {
        mix.loading = 'more';
      }
    })
    .finally(() => {
      mix.isSend = false;
      uni.stopPullDownRefresh();
    });
};

// 获取用户信息
const loadAccount = () => {
  accountInfo({}, { showLoad: false }).then(res => {
    if (res.success) {
      state.account = res.result;
      state.loading = false;
    }
  });
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  initDictConfig();
  loadAccount();
  loadData();
});

// 页面滚动到底部
onReachBottom(() => {
  if (mix.loading === 'noMore') return;
  loadData();
});

// 下拉刷新
onPullDownRefresh(() => {
  loadData(1);
});

// 点击提现
const onWithDraw = () => {
  state.num = state.account.undrawnAmount / 100;
  popupRef.value.open();
};

// 金额改变
const onInput = e => {
  let value = e.detail.value;
  value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
  if (value.indexOf('.') < 0 && value != '') {
    value = parseFloat(value);
  }
  nextTick(() => {
    state.num = value;
  });
};

// 关闭弹窗
const popopClose = () => {
  popupRef.value.close();
};

// 确定
const onSure = () => {
  if (state.isSend) return;
  if (!state.num) {
    uni.showToast({
      icon: 'none',
      title: '提现金额不能为空'
    });
    return;
  }
  state.isSend = true;
  withdrawalAdd({ withdrawalAmount: state.num * 100 })
    .then(res => {
      popopClose();
      uni.showToast({
        title: '提现成功',
        mask: true
      });
      state.num = null;
      setTimeout(() => {
        loadAccount();
        loadData(1);
      }, 2000);
    })
    .finally(() => {
      setTimeout(() => {
        state.isSend = false;
      }, 2000);
    });
};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.btns {
  padding-top: 20rpx;

  .btn {
    padding: 20rpx 0;
    margin: 0 20rpx;
    line-height: 1.5;
    opacity: 0.6;
  }
}

.list {
  padding: 0 20rpx;
  .item {
    padding: 30rpx 0;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 10rpx rgba(#000, 0.1);
    line-height: 2;
    > .flex {
      padding: 0 30rpx;
    }
  }
}

.popup-withdraw {
  .tit {
    padding-bottom: 10rpx;
  }
  .ct {
    padding: 0 30rpx;
    .input {
      padding: 0 20rpx;
      height: 70rpx;
      line-height: 70rpx;
    }
  }
}
</style>
